<template>
  <div class="app-container">
    <!-- 顶部控制台 -->
    <div class="filter-container" style="text-align: left">
      <el-select class="filter-item" style="width: 130px" size="mini" placeholder="请选择筛选类型" v-model="form.searchTitleType">
        <el-option v-for="item in pageData.searchTitleTypeList" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-input  class="filter-item" style="width: 160px" size="mini" placeholder="请输入搜索的标题" v-model="form.searchTitle"/>
      <el-select class="filter-item" style="width: 120px" size="mini" v-model="form.searchClassType" placeholder="请选择研修班类型">
        <el-option v-for="item in pageData.searchClassTypeList" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-select class="filter-item" style="width: 120px" size="mini" placeholder="请选择考试类型" v-model="form.searchExamType">
        <el-option v-for="item in pageData.searchExamTypeList" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-select class="filter-item" style="width: 120px" size="mini" placeholder="请选择发布状态" v-model="form.searchStatus">
        <el-option v-for="item in pageData.searchStatusList" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-date-picker class="filter-item" size="mini" v-model="form.searchDate" type="daterange" :unlink-panels="pageData.unlinkPanels"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pageData.pickerOptions" @change="handlePageInit">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="handlePageInit" size="mini">搜索</el-button>
      <el-button type="primary" icon="el-icon-search" @click="handleOpenSavePage" size="mini">新建考试</el-button>
    </div>
    <!-- 页面数据列表 -->
    <el-table :data="responseData.tableList"
              border style="width: 100%;"
              v-loading="pageData.loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              :header-cell-style="{ background: '#545C64', color: '#ffffff' }"
              @selection-change="handleTableSelection">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column fixed="left" prop="examId" label="考试ID" width="320" align="center"/>
      <el-table-column prop="examName" label="考试名称" width="260" align="center"/>
      <el-table-column prop="signUpId" label="研修班名称" width="180" align="center"/>
      <el-table-column prop="examClassType" label="研修班类型" width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.examClassType === 1"><el-tag type="success">线上</el-tag></span>
          <span v-if="scope.row.examClassType === 2"><el-tag type="primary">线下</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column prop="examType" label="考试类型" width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.examType === 1"><el-tag type="success">正考</el-tag></span>
          <span v-if="scope.row.examType === 2"><el-tag type="primary">补考</el-tag></span>
          <span v-if="scope.row.examType === 3"><el-tag type="info">加试</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column prop="examStatus" label="发布状态" width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.examStatus === 1"><el-tag type="success">发布</el-tag></span>
          <span v-if="scope.row.examStatus === 0"><el-tag type="info">预设</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column prop="examLabel" label="考试标签" width="320" align="center">
        <template slot-scope="scope">
            <span v-for="item in scope.row.examLabel.split(',')">
              <span v-if="item !== ''"><el-tag type="success">{{item}}</el-tag></span>
            </span>
        </template>
      </el-table-column>
      <el-table-column prop="examPassingScore" label="合格分数" width="120" align="center"/>
      <el-table-column prop="examLabel" label="待处理申诉" width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.appealCount == 0"><el-tag type="success">无</el-tag></span>
          <span v-if="scope.row.appealCount != 0"><el-tag type="warning">{{scope.row.appealCount}}</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column prop="examCreateTime" label="创建时间" width="180" align="center" :formatter="handleFormatTableDateColumn"/>
      <el-table-column prop="examStartTime" label="开始时间" width="180" align="center" :formatter="handleFormatTableDateColumn"/>
      <el-table-column prop="examEndTime" label="结束时间" width="180" align="center" :formatter="handleFormatTableDateColumn"/>
      <el-table-column fixed="right" label="操作" width="320" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleOpenScorePanel(scope)">成绩查询</el-button>
          <el-button size="mini" type="primary" @click="handleOpenEditPage(scope)">编辑</el-button>
          <el-button v-if="scope.row.examStatus === 0" size="mini" type="success" @click="handleUpdateDataStatus(scope, 1)">发布</el-button>
          <el-button v-if="scope.row.examStatus === 1" size="mini" type="info" @click="handleUpdateDataStatus(scope, 0)">下架</el-button>
          <el-button size="mini" type="danger" @click="handleDeleteData(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="form.pageNum"
      :page-size="form.pageSize"
      :total="form.total"
      :page-sizes="[12, 50, 100, 200]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
    <!-- 成绩查询隐藏域 -->
    <el-dialog title="成绩查询" :visible.sync="pageData.scorePanelStatus" size="tiny" width="1024px"
               :before-close="handleCloseScorePanel">
      <el-row style="margin-bottom: 20px;">
        <el-col :span="24">
          <div class="filter-container" style="text-align: left">
            <el-input  class="filter-item" style="width: 160px" size="mini" placeholder="学员ID/手机号" v-model="pageData.scorePanelSearchTitle"/>
            <el-button type="primary" icon="el-icon-search" @click="handleSearchPaperPaper" size="mini">搜索</el-button>
          </div>
        </el-col>
      </el-row>
      <el-card class="paper-score-card" :body-style="{ padding: '0px' }">
        <div class="data-table" style="height: 540px;">
          <el-table :data="pageData.scorePanelInfo"
                    height="480"
                    border style="width: 100%"
                    :header-cell-style="{ background: '#545C64', color: '#ffffff' }">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column fixed="left" prop="userPhone" label="用户手机号" width="120" align="center"/>
            <el-table-column prop="isSubmit" label="是否交卷" width="120" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.isSubmit === 0"><el-tag type="warning">未交卷</el-tag></span>
                <span v-if="scope.row.isSubmit === 1"><el-tag type="success">已交卷</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column prop="paperScore" label="考试得分" width="180" align="center"/>
            <el-table-column prop="paperSuccess" label="是否通过" width="120" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.paperSuccess === 0"><el-tag type="warning">未通过</el-tag></span>
                <span v-if="scope.row.paperSuccess === 1"><el-tag type="success">已通过</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column prop="matchFaceStatus" label="抓拍状态" width="120" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.matchFaceStatus === 0"><el-tag type="info">无</el-tag></span>
                <span v-if="scope.row.matchFaceStatus === 1"><el-tag type="success">正常</el-tag></span>
                <span v-if="scope.row.matchFaceStatus === 2"><el-tag type="warning">异常</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column prop="matchFaceAppealStatus" label="申诉状态" width="120" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.matchFaceAppealStatus === 0"><el-tag type="info">无</el-tag></span>
                <span v-if="scope.row.matchFaceAppealStatus === 1"><el-tag type="warning">申诉中</el-tag></span>
                <span v-if="scope.row.matchFaceAppealStatus === 2"><el-tag type="success">通过申诉</el-tag></span>
                <span v-if="scope.row.matchFaceAppealStatus === 3"><el-tag type="danger">驳回申诉</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户名称" width="180" align="center"/>
            <el-table-column prop="userIdent" label="身份证号" width="180" align="center"/>
            <el-table-column prop="userCompany" label="单位名称" width="240" align="center"/>
            <el-table-column prop="createTime" label="开考时间" width="180" align="center" :formatter="handleFormatTableDateColumn"/>
            <el-table-column prop="endTime" label="交卷时间" width="180" align="center" :formatter="handleFormatTableDateColumn"/>
            <el-table-column fixed="right" label="操作" width="220" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleOpenMatchFacePanel(scope)">抓拍详情</el-button>
                <el-button size="mini" type="primary" @click="handleOpenPaperPanel(scope)">详细试卷</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="pageData.scorePanelPageNum"
            :page-size="pageData.scorePanelPageSize"
            :total="pageData.scorePanelTotal"
            :page-sizes="[7]"
            @current-change="handleCurrentChange2"
            @size-change="handleSizeChange2">
          </el-pagination>
        </div>
      </el-card>
    </el-dialog>
    <!-- 试卷查询隐藏域 -->
    <el-dialog title="试卷结果" :visible.sync="pageData.paperPanelStatus" size="tiny" width="1024px"
               :before-close="handleClosePaperPanel">
      <el-row style="margin-bottom: 20px;">
        <el-col :span="24">
          <div class="filter-container" style="text-align: left">
            <el-input  class="filter-item" style="width: 160px" size="mini" placeholder="题目/题目ID" v-model="pageData.paperPanelSearchTitle"/>
            <el-button type="primary" icon="el-icon-search" @click="handleSearchPaperQuestion" size="mini">搜索</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px;">
        <el-col :span="24">
          <el-descriptions :column="3" size="3" border>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-user"></i>学员姓名</template>
              {{responseData.paperList.paperUserName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-mobile-phone"></i>手机号</template>
              {{responseData.paperList.paperUserPhone}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-location-outline"></i>考试分数</template>
              <el-tag size="small">
                {{responseData.paperList.paperScore}}分
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-tickets"></i>公司名称</template>
              <el-tag size="small">
                {{responseData.paperList.paperUserCompany}}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-tickets"></i>选项排序</template>
              <el-tag v-if="responseData.paperList.examQuestionOptionSortType == 1" size="small">
                当前试卷选项已被乱序，可能与题目配置不符，正确答案为试卷生成时的配置，或前往对应对应原题进行查询
              </el-tag>
              <el-tag v-else size="small">
                当前试卷排序正常
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px;">
        <div style="width: 100%; height: 160px; overflow-y: scroll">
          <el-col :span="2" v-for="item in responseData.paperList.paperList" :key="item.paperQuestionNumber">
            <el-button v-if="item.paperQuestionAnswerStatus == 0 || item.paperQuestionAnswerIsTrue == 0" type="danger"
                       @click="handleClickPaperQuestion(item)" style="width: 45px;height: 45px; border-radius: 50px; padding: 0 !important;">{{item.paperQuestionNumber}}</el-button>
            <el-button v-else type="success"
                       @click="handleClickPaperQuestion(item)" style="width: 45px;height: 45px; border-radius: 50px; padding: 0 !important;">{{item.paperQuestionNumber}}</el-button>
          </el-col>
        </div>
      </el-row>
      <el-row >
        <el-col :span="24">
          <el-card shadow="always">
            <el-row>
              <el-col :span="12">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="text-align: justify; padding-left: 15px; padding-right: 15px">
                    <h1>{{pageData.paperPanelInfo.paperQuestionNumber}}.{{pageData.paperPanelInfo.paperExamQuestionName}}</h1>
                    <el-row>
                      <el-col :span="12"><span style="text-align: left">用户选择：{{pageData.paperPanelInfo.paperQuestionAnswer}}</span></el-col>
                      <el-col :span="12"><span style="text-align: right">答题时间：{{handleFormatDateToStr(pageData.paperPanelInfo.paperQuestionAnswerTime)}}</span></el-col>
                    </el-row>
                    <el-divider content-position="left"></el-divider>
                  </div>
                  <el-checkbox-group v-model="pageData.paperPanelInfo.paperQuestionUserAnswer">
                    <div v-for="item in pageData.paperPanelInfo.paperQuestionOptionList" style="text-align: justify; margin-bottom: 20px; margin-left: 20px">
                      <el-checkbox v-model="pageData.paperPanelInfo.paperQuestionAnswer" :label="item.optionNumber" :key="item.optionNumber" disabled>{{item.optionNumber}}.{{item.optionName}}</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card :body-style="{ padding: '0px' }" style="height: 100%">
                  <div style="text-align: justify; padding-left: 15px; padding-right: 15px">
                    <h1>正确答案：{{pageData.paperPanelInfo.examQuestionCorrectAnswer}}</h1>
                    <el-row>
                      <el-col :span="12"><el-button @click="handleOpenQuestionPage(pageData.paperPanelInfo.paperQuestionId)">原题链接</el-button></el-col>
                    </el-row>
                    <el-divider content-position="left"></el-divider>
                  </div>
                  <div v-html="pageData.paperPanelInfo.examQuestionInfo" style="text-align: justify; margin-bottom: 20px; padding-left: 20px; padding-right: 20px; font-size: 1.17em; font-weight: bold"></div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 试卷抓拍隐藏域 -->
    <el-dialog title="抓拍详情" :visible.sync="pageData.matchPanelStatus" size="tiny" width="1024px"
               :before-close="handleCloseMatchFacePanel">
      <el-row style="margin-bottom: 20px;">
        <el-col :span="20">
          <el-descriptions :column="3" border>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-user"></i>姓名:</template>
              <el-tag type="info" size="small">{{responseData.matchFaceInfo.userName}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-mobile-phone"></i>学员手机号：</template>
              <el-tag type="info" size="small">{{responseData.matchFaceInfo.userPhone}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-help"></i>题目数量：</template>
              <el-tag type="warning" size="small">{{responseData.matchFaceInfo.questionCount}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-place"></i>抓拍状态:</template>
              <el-tag v-if="responseData.matchFaceInfo.matchFaceStatus == 0" type="info" size="small">无</el-tag>
              <el-tag v-if="responseData.matchFaceInfo.matchFaceStatus == 1" type="success" size="small">正常</el-tag>
              <el-tag v-if="responseData.matchFaceInfo.matchFaceStatus == 2" type="danger" size="small">异常</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-alarm-clock"></i>开考时间：</template>
              <el-tag size="small">{{handleFormatDateToStr(responseData.matchFaceInfo.createTime)}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-alarm-clock"></i>交卷时间：</template>
              <el-tag size="small">{{handleFormatDateToStr(responseData.matchFaceInfo.endTime)}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-location-outline"></i>申诉状态：</template>
              <el-tag v-if="responseData.matchFaceInfo.matchFaceAppealStatus == 0" type="info" size="small">无</el-tag>
              <el-tag v-if="responseData.matchFaceInfo.matchFaceAppealStatus == 1 && responseData.matchFaceInfo.matchFaceStatus == 2"
                      type="warning" size="small">申诉中</el-tag>
              <el-tag v-if="responseData.matchFaceInfo.matchFaceAppealStatus == 2 && responseData.matchFaceInfo.matchFaceStatus == 2"
                      type="success" size="small">通过申诉</el-tag>
              <el-tag v-if="responseData.matchFaceInfo.matchFaceAppealStatus == 3 && responseData.matchFaceInfo.matchFaceStatus == 2"
                      type="danger" size="small">驳回申诉</el-tag>

              <el-tag v-if="(responseData.matchFaceInfo.matchFaceAppealStatus != 2 && responseData.matchFaceInfo.matchFaceAppealStatus != 0) &&
              responseData.matchFaceInfo.matchFaceStatus == 2"
                      size="small" style="margin-left: 30px" @click="handleMatchFaceAppealStatus(responseData.matchFaceInfo.paperId,2)">通过</el-tag>
              <el-tag v-if="responseData.matchFaceInfo.matchFaceAppealStatus == 1 && responseData.matchFaceInfo.matchFaceStatus == 2"
                      type="danger" size="small" style="margin-left: 30px" @click="handleMatchFaceAppealStatus(responseData.matchFaceInfo.paperId,3)">驳回</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="4">
          <el-image style="width: 100px; height: 100px" :src="responseData.matchFaceInfo.userImage" fit="['fill', 'contain', 'cover', 'none', 'scale-down']"></el-image>
        </el-col>
        <el-col :span="16" style="margin-top: 20px">
          <el-descriptions :column="3" border>
            <el-descriptions-item>
              <template slot="label"><i class="el-icon-user"></i>用户申诉理由:</template>
              <el-input style="width: 480px" type="textarea" :rows="3" placeholder="请输入内容" v-model="responseData.matchFaceInfo.matchFaceAppealReason" disabled></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="8" style="margin-top: 20px">
          <el-timeline reverse="true">
            <el-timeline-item
              v-for="(paperMatchFaceHistory, index) in responseData.matchFaceInfo.paperMatchFaceHistoryList"
              :key="index"
              :timestamp="handleFormatDateToStr(paperMatchFaceHistory.createTime)">
              由 {{paperMatchFaceHistory.userName}} {{paperMatchFaceHistory.action}} <span v-if="paperMatchFaceHistory.action == '驳回申诉'">
              <br>驳回理由：{{responseData.matchFaceInfo.matchFaceAppealInfo}}</span>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px;">
        <el-table :data="responseData.matchFaceInfo.paperMatchFaceList"
                  border style="width: 100%;"
                  :header-cell-style="{ background: '#545C64', color: '#ffffff' }">
          <el-table-column prop="createTime" label="抓拍时间" width="160" align="center">
            <template slot-scope="scope">
              {{handleFormatDateToStr(scope.row.createTime)}}
            </template>
          </el-table-column>
          <el-table-column prop="questionName" label="题目（双击查看原题）" width="340" align="center">
            <template slot-scope="scope">
              <span class="link-type" @dblclick="handleOpenQuestionPage(scope.row.questionId)">{{ scope.row.questionName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="questionNumber" label="考试题目序号" width="110" align="center"/>
          <el-table-column prop="ip" label="抓拍时IP" width="180" align="center">
            <template slot-scope="scope">
              <span class="link-type">{{ scope.row.ip }}</span><br/><span class="link-type">{{ scope.row.province }}</span>
            </template>
          </el-table-column>
          <el-table-column label="照片（点击放大）" width="180" align="center">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: 75px;" :class="scope.row.faceMatchStatus == 0?'faceMatchStatus':''"
                        :src="scope.row.faceImage" fit="['fill', 'contain', 'cover', 'none', 'scale-down']"
              @click="handleOpenMatchImagePanel(scope)"></el-image>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row >
        <el-col :span="24">
          <el-button type="primary" @click="handleCloseMatchFacePanel">关闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 试卷抓拍对比隐藏域 -->
    <el-dialog title="" :visible.sync="pageData.matchImagePanelStatus" size="tiny" width="1024px"
               :before-close="handleCloseMatchImagePanel">
      <el-row style="margin-bottom: 20px;">
        <el-col :span="12">
          <el-card :body-style="{ padding: '0px' }">
            <el-image :src="responseData.matchFaceInfo.userImage" class="image" fit="fill" style="height: 100%"></el-image>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-carousel arrow="always" :autoplay="false" :initial-index="pageData.initialIndex" v-if="pageData.matchImagePanelStatus">
            <el-carousel-item v-for="item in responseData.matchFaceInfo.paperMatchFaceList" :key="item.id">
              <el-image :src="item.faceImage" class="image" :class="item.faceMatchStatus == 0?'faceMatchStatus':''" fit="fill"
                        style="height: 100%"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="24">
          <el-button type="primary" @click="handleCloseMatchImagePanel">关闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  // 组件引入
  // 方法工具引入
  import { PermissionsToDetectFormUser } from '@/utils/PermissionsDetect';
  import { getPermission } from '@/utils/UserCookies';
  // 接口引入
  import { loadCmsExamList,batchReleaseCmsExamData,loadCmsExamPaperList,loadCmsExamPaperInfo,loadCmsExamPaperMatchFaceInfo,
    updateCmsExamPaperAppealStatus} from "@/api/study";
  export default {
    name: "exam",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      return {
        pageData:{
          loading: false,
          searchTitleTypeList: [
            {label: "考试名称", value: 1},
            {label: "研修班名称", value: 2},
            {label: "学员手机号", value: 3},
            {label: "研修班ID", value: 4},
          ],
          searchClassTypeList: [
            {label: "研修班类型", value: -1},
            {label: "线上研修班", value: 1},
            {label: "线下研修班", value: 2}
          ],
          searchExamTypeList: [
            {label: "考试类型", value: -1},
            {label: "正考", value: 1},
            {label: "补考", value: 2},
            {label: "加试", value: 3},
          ],
          searchStatusList: [
            {label: "发布状态", value: -1},
            {label: "发布", value: 1},
            {label: "未发布", value: 0}
          ],
          unlinkPanels: true,// 时间筛选
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },// 时间筛选
          scorePanelStatus: false,// 试卷列表
          scorePanelExamId: "",
          scorePanelInfo: [],
          scorePanelPageNum: 1,
          scorePanelPageSize: 7,
          scorePanelTotal: 0,
          scorePanelSearchTitle: "",
          paperPanelStatus: false,// 试卷详情
          paperPanelInfo: {},
          paperPanelSearchTitle: "",
          matchPanelStatus: false,// 抓拍面板
          matchImagePanelStatus: false,// 抓拍比对面板
          initialIndex: 0,
        },// 页面配置数据
        form:{
          searchTitleType: 1,// 标题类型筛选项
          searchTitle: "",// 筛选标题
          searchClassType: -1,
          searchExamType: -1,
          searchStatus: -1,
          searchDate: "",// 创建时间
          startDate: "",
          endDate: "",
          pageNum: 1,// 表单--页码
          pageSize: 12,// 表单--页面
          total: 0,// 表单--总量
          selection: []// 多选的内容
        },// 页面表单
        formRules: {},// 表单验证
        responseData: {
          tableList: [],
          scoreList: [],
          paperList: [],
          matchFaceInfo: {}
        },// 接口响应数据
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods:{
      // 方法函数
      handlePageInit(){
        this.form.pageNum = 1;
        this.pageData.loading = true;// 创建加载窗口
        this.loadCmsExamList();
      },// 页面初始化事件
      handleCurrentChange(val){
        this.form.pageNum = val;// 更换页码
        this.pageData.loading = true;// 创建加载窗口
        this.loadCmsExamList();
      },// 页码切换事件
      handleSizeChange(val){
        this.form.pageSize = val;// 更换页面大小
        this.pageData.loading = true;// 创建加载窗口
        this.loadCmsExamList();
      },// 页面size切换事件
      handleTableSelection(val){
        let list = [];// 初始化多选数组
        for (let i=0; i<val.length; i++){
          list.push(val[i].examId);
        }// 遍历多选的列表，将ID拼入数组中
        this.form.selection = list;// 进行多选值的切换
      },// 表格多选事件
      handleOpenSavePage(){
        if (PermissionsToDetectFormUser(getPermission(), "620001")){
          this.$jump.push({path: '/study/examSave'});
        }  else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 打开考试新增面板
      handleOpenEditPage(scope){
        if (PermissionsToDetectFormUser(getPermission(), "620003")){
          let routeUrl = this.$router.resolve({
            path: "/study/examEdit",
            query: {examId: scope.row.examId}
          });
          window.open(routeUrl.href, '_blank');
        }  else {
          // 当前权限不足，不执行操作，给与相应提示
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 打开考试修改页面
      handleUpdateDataStatus(scope, status){
        if (PermissionsToDetectFormUser(getPermission(), "620005")){
          this.$confirm("是否更改当前所选数据的发布状态?", "提示", {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let param = {
              examId: scope.row.examId,
              examStatus: status
            };
            this.batchReleaseCmsExamData(param);
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 更改数据发布状态
      handleDeleteData(scope){
        this.$message.info("该功能暂未开放，如有需要请联系管理员");
      },// 删除数据按钮
      handleOpenScorePanel(scope){
        this.pageData.scorePanelPageNum = 1;
        this.pageData.scorePanelPageSize = 7;
        this.pageData.scorePanelSearchTitle = "";
        this.pageData.scorePanelExamId = scope.row.examId;
        // 数据请求
        this.loadCmsExamPaperList();
      },// 打开成绩查询面板
      handleCloseScorePanel(){
        this.$confirm("确认关闭？").then(response => {
          this.pageData.scorePanelPageNum = 1;
          this.pageData.scorePanelPageSize = 7;
          this.pageData.scorePanelTotal = 0;
          this.pageData.scorePanelSearchTitle = "";
          this.pageData.scorePanelExamId = "";
          this.responseData.scoreList = [];
          this.pageData.scorePanelStatus = false;
        }).catch(err => {
          console.log(err);
        });
      },// 关闭成绩查询面板
      handleSearchPaperPaper(){
        // 重置页码
        this.pageData.scorePanelPageNum = 1;
        this.loadCmsExamPaperList();
      },// 成绩查询页面对学员的查询
      handleCurrentChange2(val){
        this.pageData.scorePanelPageNum = val;// 更换页码
        this.loadCmsExamPaperList();
      },
      handleSizeChange2(val){
        this.pageData.scorePanelPageSize = val;// 更换页码
        this.loadCmsExamPaperList();
      },
      handleOpenPaperPanel(scope){
        let param = {paperId: scope.row.paperId};
        this.loadCmsExamPaperInfo(param);
      },// 打开试卷查看面板
      handleClosePaperPanel(){
        this.$confirm("确认关闭？").then(response => {
          this.responseData.paperList = [];
          this.pageData.paperPanelInfo = {};
          this.pageData.paperPanelSearchTitle = "";
          this.pageData.paperPanelStatus = false;
        }).catch(err => {
          console.log(err);
        });
      },// 关闭试卷查询面板
      handleClickPaperQuestion(item){
        this.pageData.paperPanelInfo = item;
      },// 点击题目编号
      handleSearchPaperQuestion(){
        if (this.pageData.paperPanelSearchTitle != ''){
          for (let i=0; i<this.responseData.paperList.paperList.length; i++) {
            if (this.responseData.paperList.paperList[i].paperExamQuestionName == this.pageData.paperPanelSearchTitle ||
              this.responseData.paperList.paperList[i].paperQuestionId == this.pageData.paperPanelSearchTitle){
              this.pageData.paperPanelInfo = this.responseData.paperList.paperList[i];
              return;
            }
          }
        }
        this.$message.info("未所搜到对应题目或题目ID，请检查搜索项")
      },// 搜索定位题目
      handleFormatTableDateColumn(row, column){
        let data = row[column.property];
        if (data ===null) {
          return ''
        }
        let dt = new Date(data);
        return this.getTime(dt,"year")+'-'+this.getTime(dt,"month")+'-'+this.getTime(dt,"day")+' '+this.getTime(dt,"hour")+':'+this.getTime(dt,"minute")+':'+this.getTime(dt,"second");
      },// 时间字段格式化
      handleOpenQuestionPage(id){
        if (PermissionsToDetectFormUser(getPermission(), "610003")){
          let routeUrl = this.$router.resolve({
            path: "/study/questionEdit",
            query: {questionId: id}
          });
          window.open(routeUrl.href, '_blank');
        }  else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 跳转到题目修改页
      handleOpenMatchFacePanel(scope){
        let param = {paperId: scope.row.paperId};
        this.loadCmsExamPaperMatchFaceInfo(param);
      },// 打开抓拍详情面板
      handleMatchFaceAppealStatus(paperId,status){
        if (status == 2){// 点击状态为通过
          this.$confirm("是否确认更改成绩为“通过”?", "提示", {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let param = {
              paperId: paperId,
              matchFaceAppealStatus: status
            };
            this.updateCmsExamPaperAppealStatus(param,paperId);
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else if (status == 3) {// 点击状态为驳回
          this.$prompt('请输入驳回理由', '提示', {
            confirmButtonText: '确定驳回',
            cancelButtonText: '取消',
            inputValidator: (value) => {
              if (!value || value.length > 100) {
                return "输入不正确，最大支持100字符";
              }
            },
            inputErrorMessage: "输入不正确，最大支持100字符"
          }).then(({ value }) => {
            let param = {
              paperId: paperId,
              matchFaceAppealStatus: status,
              matchFaceAppealInfo: value
            };
            this.updateCmsExamPaperAppealStatus(param,paperId);
          }).catch(() => {
            this.$message.info("已取消操作");
          });
        }
      },// 修改申诉状态
      handleCloseMatchFacePanel(){
        this.$confirm("确认关闭？").then(response => {
          this.responseData.matchFaceInfo = {};
          this.pageData.matchPanelStatus = false;
        }).catch(err => {
          console.log(err);
        });
      },// 关闭抓拍详情面板
      handleOpenMatchImagePanel(scope){
        this.pageData.initialIndex = scope.$index;
        this.pageData.matchImagePanelStatus = true;
      },// 打开图片比对面板
      handleCloseMatchImagePanel(){
        this.$confirm("确认关闭？").then(response => {
          this.pageData.initialIndex = 0;
          this.pageData.matchImagePanelStatus = false;
        }).catch(err => {
          console.log(err);
        });
      },// 关闭图片比对面板
      handleFormatDateToStr(data) {
        if (data ===null) {
          return ''
        }
        let dt = new Date(data);
        return this.getTime(dt,"year")+'-'+this.getTime(dt,"month")+'-'+this.getTime(dt,"day")+' '+this.getTime(dt,"hour")+':'+this.getTime(dt,"minute")+':'+this.getTime(dt,"second");
      },
      getTime(date,type){
        let time = null;
        switch (type) {
          case 'year':
            time = date.getFullYear().toString();
            break;
          case 'month':
            time = date.getMonth() + 1;
            time = time.toString().length === 2 ? time : ('0' + time)
            break;
          case 'day':
            time = date.getDate();
            time = time.toString().length === 2 ? time : ('0' + time)
            break;
          case 'hour':
            time = date.getHours();
            time = time.toString().length === 2 ? time : ('0' + time)
            break;
          case 'minute':
            time = date.getMinutes();
            time = time.toString().length === 2 ? time : ('0' + time)
            break;
          case 'second':
            time = date.getSeconds();
            time = time.toString().length === 2 ? time : ('0' + time)
            break
        }
        return time
      },



      // 接口
      loadCmsExamList(){
        // 时间字段处理
        if (this.form.searchDate !== "" && this.form.searchDate !== "0" && this.form.searchDate != null){
          let date1 = new Date(this.form.searchDate[0]);
          this.form.startDate = date1.getFullYear()+"-"+("0"+(date1.getMonth()+1)).slice(-2)+"-"+date1.getDate() + " 00:00:00";
          let date2 = new Date(this.form.searchDate[1]);
          this.form.endDate = date2.getFullYear()+"-"+("0"+(date2.getMonth()+1)).slice(-2)+"-"+date2.getDate() + " 23:59:59";
        }
        loadCmsExamList(this.form).then(response => {
          if (response.code === "200"){
            this.pageData.loading = false;
            this.responseData.tableList = response.data.list;
            this.form.total = response.data.total;
          } else {
            this.$message.warning(response.message);
          }
        }).catch( error =>{
          console.log(error);
          this.$message.error(error);
        })
      },// 获取考试列表
      batchReleaseCmsExamData(param){
        batchReleaseCmsExamData(param).then(response => {
          if (response.code === '200'){
            this.$message.success('数据状态更新成功');
            this.handlePageInit();
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 更改数据发布状态
      loadCmsExamPaperList(){
        let param = {
          examId: this.pageData.scorePanelExamId,
          pageNum: this.pageData.scorePanelPageNum,
          pageSize: this.pageData.scorePanelPageSize,
          searchTitle: this.pageData.scorePanelSearchTitle
        };
        loadCmsExamPaperList(param).then(response => {
          if (response.code === "200"){
            this.responseData.scoreList = response.data.list;
            this.pageData.scorePanelInfo = this.responseData.scoreList;
            this.pageData.scorePanelTotal = response.data.total;
            this.pageData.scorePanelStatus = true;
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 获取当前考试下所有学员的成绩
      loadCmsExamPaperInfo(param){
        loadCmsExamPaperInfo(param).then(response => {
          if (response.code === "200"){
            this.responseData.paperList = response.data;
            for (let i=0; i<this.responseData.paperList.paperList.length; i++) {
              if (this.responseData.paperList.paperList[i].paperQuestionAnswer != ''){
                this.responseData.paperList.paperList[i].paperQuestionUserAnswer = this.responseData.paperList.paperList[i].paperQuestionAnswer.split(",");
              } else {
                this.responseData.paperList.paperList[i].paperQuestionUserAnswer = [];
              }
            }
            this.pageData.paperPanelInfo = this.responseData.paperList.paperList[0];
            this.pageData.paperPanelStatus = true;
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 获取学员卷面信息
      loadCmsExamPaperMatchFaceInfo(param){
        loadCmsExamPaperMatchFaceInfo(param).then(response => {
          if (response.code === "200"){
            this.responseData.matchFaceInfo = response.data;
            this.pageData.matchPanelStatus = true;
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 获取卷面人脸比对结果信息
      updateCmsExamPaperAppealStatus(param,paperId){
        updateCmsExamPaperAppealStatus(param).then(response => {
          if (response.code === "200"){
            this.$message.success("申诉状态修改成功");
            let param = {paperId: paperId};
            this.loadCmsExamPaperMatchFaceInfo(param);
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 修改试卷申诉状态
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created: function () {
      let _this = this;
      document.onkeydown = function(e) {
        if (!_this.pageData.loading) {
          let key = window.event.keyCode;
          if (key === 13) {
            _this.handlePageInit(); //此方法是当按下enter键后要做的动作。
          }
        }
      };
      // 进行初始化数据读取
      setTimeout(function () {
        _this.handlePageInit();
      }, 800);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    display:flex;
    flex-wrap: wrap;
  }
  .el-row  .el-card {
    min-width: 100%;
    height: 100%;
    margin-right: 20px;
    transition: all .5s;
  }
  .faceMatchStatus {
    border:2px solid red
  }
</style>
